<template>
  <div class="my-product-list-page">
    <b-loading v-if="!loading"/>
    <div class="xlb-conss" style="background-color: white; min-height: 50rem !important;">
      <div class="user_boe">
        <my-product-card v-for="product in productList" :key="product.moduleCode" v-bind="product"/>
      </div>
    </div>
  </div>

</template>

<script>
  import MyProductCard from './components/my-product-card'
  import productList from '@/perm/views/product/product-data'
  import API from '../../../api/product'

  export default {
    name: 'MyProductList',
    components: {
      MyProductCard
    },
    data () {
      return {
        productList,
        codeList: ['WxWorkBasic', 'WxWorkVIP', 'WxMpBasic', 'WxMpVIP'],
        loading: false
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        API.listMyOrder({ qwUserId: this.qwUserId, codeList: this.codeList }).then(res => {
          this.productList.forEach(suite => {
            suite.suiteList.forEach(item => {
              res.forEach(resItem => {
                if (resItem.code === item.code) {
                  this.$set(item, 'expiresAt', resItem.endTime)
                  this.$set(item, 'enabled', resItem.enabled)
                }
              })
            })
          })
          this.loading = true
        }).catch(() => {
          this.loading = true
        })
      }
    }
  }
</script>

<style lang="less">
  .my-product-list-page {
    .xlb-conss {
      padding: 28px 35px;
      min-height: 910px;
      box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
      transition: all .3s;
    }

    .user_boe {
      display: flex;
      flex-direction: row;
      justify-content: left;
      flex-wrap: wrap;
    }

  }

</style>
